<template>
  <div class="quantity">
    <div class="left">
      <img :src="detail.logoImg" alt="" class="baiimg" />
      <div>
        <p class="bai" style="font-size: 3.7vw">
          {{ detail.symbolName }}
          <span style="font-size: 2.6vw">{{ $t("common.yongxu") }}</span>
        </p>
        <p style="font-size: 2.6vw; color: rgba(135, 139, 151, 100)">
          {{ $t("common.chengjiao") }}{{ detail.sumPrice }} USDT
        </p>
      </div>
    </div>
    <div class="content">
      <p
        :class="
          colorText == 'more'
            ? 'green3'
            : colorText == 'kong'
            ? 'red3'
            : 'baise'
        "
      >
        {{ $formatMoney(detail.lastPrice, 10) }}
      </p>
      <p class="two">${{ $formatMoney(detail.lastPrice, 10) }}</p>
    </div>
    <div :class="+detail.riseAndFallRange > 0 ? 'green2 right' : 'red2 right'">
      {{
        +detail.riseAndFallRange > 0
          ? "+" + detail.riseAndFallRange
          : detail.riseAndFallRange
      }}%
    </div>
  </div>
</template>

<script>
export default {
  props: ["detail", "colorText"],
  data() {
    return {};
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
.quantity {
  display: flex;
  justify-content: space-between;
  padding:2.4vw 3vw;
  .left {
    display: flex;
    width: 50vw;
    text-align: left;
    p {
      margin-bottom: 1vw;
      // margin-left: 3.4vw;
      img {
        width: 3vw;
        height: 3vw;
      }
    }
    .bai {
      color: #fff;
      font-size: 3.6vw;
      font-weight: 600;
      span {
        color: #8992AE;
        font-size: 3vw;
      }
    }
  }
  .content {
    width: 19vw;
    text-align: right;
    margin-right: 2vw;
    // margin-right:20px;
    .bai {
      position: relative;
      font-size: 3.73vw;
      font-weight: 600;
    }
    .two {
      color: rgba(135, 139, 151, 100);
      font-size: 2.6vw;
      margin-top: 1vw;
    }
  }
  .right {
    color: #fff;
    height:8.2vw;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 2px;
    font-size: 3.2vw;
    width: 20vw;
    font-weight: 600;
  }
}
.green2 {
  background-color: #00a77f !important;
}
.red2 {
  background-color: #e45360 !important;
}
.green3 {
  color: #00a77f;
  font-size: 3.6vw;
  font-weight: 600;
}
.red3 {
  color: #e45360;
  font-size: 3.6vw;
  font-weight: 600;
}
.baise {
  color: #fff;
  font-size: 3.6vw;
  font-weight: 600;
}
.baiimg {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  margin-right: 10px;
}
</style>